<template>
  <div>
    <li v-for="good in goodsList" @click="handleClick">
      <div class="goods_choose">
        <div class="goods_header">
          <p class="i">
            <svg
              class="icon"
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              width="18"
              height="18"
            >
              <path
                d="M822.912 116.053333l-116.48 237.226667a21.333333 21.333333 0 0 0 19.2 30.72h117.248a21.333333 21.333333 0 0 1 15.232 36.266667L360.362667 926.72a21.333333 21.333333 0 0 1-36.309334-18.005333l47.445334-329.685334a21.333333 21.333333 0 0 0-18.048-24.149333l-1.536-0.170667L198.272 554.666667a21.333333 21.333333 0 0 1-21.034667-25.002667l74.069334-426.666667A21.333333 21.333333 0 0 1 272.341333 85.333333h531.456a21.333333 21.333333 0 0 1 19.114667 30.72z"
                v-if="good.article_wxapp_region == '国内精选'"
                :fill="icon.active"
              ></path>
              <path
                d="M822.912 116.053333l-116.48 237.226667a21.333333 21.333333 0 0 0 19.2 30.72h117.248a21.333333 21.333333 0 0 1 15.232 36.266667L360.362667 926.72a21.333333 21.333333 0 0 1-36.309334-18.005333l47.445334-329.685334a21.333333 21.333333 0 0 0-18.048-24.149333l-1.536-0.170667L198.272 554.666667a21.333333 21.333333 0 0 1-21.034667-25.002667l74.069334-426.666667A21.333333 21.333333 0 0 1 272.341333 85.333333h531.456a21.333333 21.333333 0 0 1 19.114667 30.72z"
                v-if="good.article_wxapp_region == '跨境精选'"
                :fill="icon.inactive"
              ></path>
              <path
                d="M822.912 116.053333l-116.48 237.226667a21.333333 21.333333 0 0 0 19.2 30.72h117.248a21.333333 21.333333 0 0 1 15.232 36.266667L360.362667 926.72a21.333333 21.333333 0 0 1-36.309334-18.005333l47.445334-329.685334a21.333333 21.333333 0 0 0-18.048-24.149333l-1.536-0.170667L198.272 554.666667a21.333333 21.333333 0 0 1-21.034667-25.002667l74.069334-426.666667A21.333333 21.333333 0 0 1 272.341333 85.333333h531.456a21.333333 21.333333 0 0 1 19.114667 30.72z"
                v-if="good.article_wxapp_region == '海淘精选'"
                :fill="icon.active2"
              ></path>
            </svg>
            <span class="country"
              >{{ good.article_wxapp_region }}
              <i>{{ good.article_channel_name }}</i></span
            >
          </p>
        </div>
        <div class="goods_item">
          <div class="goods_img">
            <img
              :src="'https://images.weserv.nl/?url=' + good.article_pic"
              style="width: 1.11rem; height: 0.97rem"
            />
          </div>

          <div class="goods_desc">
            <h2>{{ good.article_title }}</h2>
            <p class="goods_pri">{{ good.article_price }}</p>
            <p class="goods_last">
              <span class="g_1"
                >{{ good.article_mall }}|{{ good.article_format_date }}</span
              >
              <span class="g_2"
                ><i class="iconfont">&#xe667;</i> {{ good.article_comment
                }}<span class="g_3">值{{ good.article_worthy }}</span></span
              >
            </p>
          </div>
        </div>
      </div>
    </li>
  </div>
</template>

<script>
export default {
  props: ["goodsList"],
  data() {
    return {
      icon: {
        active: "#d81e06",
        inactive: "#953fab",
        active2: "#333",
      },
    };
  },
  methods:{
    handleClick(){
      this.$router.push({
        path:'/good_desc',
      })
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '../../assets/ellipsis.styl';
@import '../../assets/border.styl';

.goods {
  height: 100%;

  ul {
    li {
      width: 100%;
      background-color: white;
      height: 1.8rem;
      margin-top: 0.12rem;

      .goods_header {
        position: relative;
        width: 100%;
        height: 0.35rem;
        border_1px(0 0 1px 0);

        .i {
          line-height: 0.35rem;
          padding-left: 0.05rem;

          .icon {
            position: absolute;
            top: 0.09rem;
            font-size: 0.4rem;
          }

          .country {
            margin-left: 0.25rem;
            color black

            i {
              text-align: center;
              font-size: 0.13rem;
              color: #aaaaaa;
              border_1px(1px);
              padding: 0 0.05rem;
              margin-left: 0.1rem;
            }
          }
        }
      }

      .goods_item {
        display: flex;
        width: 100%;
        height: 1.5rem;
        padding: 0.2rem 0.14rem;

        .goods_desc {
          margin-left: 0.18rem;
          display: flex;
          width: 100%;
          flex-direction: column;
          justify-content: space-between;
          flex-wrap: wrap;

          h2 {
            font-weight: 500;
            ellipsis(100%, 2);
            color black
          }

          p {
            ellipsis(100%, 1);
          }

          .goods_last {
            font-size: 0.12rem;
            color: #999;
            display: flex;
            justify-content: space-between;

            .g_2 {
              .g_3 {
                margin-left: 0.2rem;
              }
            }
          }

          .goods_pri {
            color: #e62828;
            font-size: 0.15rem;
          }
        }
      }
    }
  }
}
</style>
